<template>
  <div class="index">
    <div class="fiexbag"></div>
    <div class="top">
      {{title}}课后服务管理平台
    </div>
    <div class="allstu topselect" ref="allstu" v-if="arr.length>0&&arr[0]==1">
      <el-select v-model="value" placeholder="请选择区域" @change="select()">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="flexbox">
      <!-- 左侧容器 -->
      <div class="betweenlf">
        <div class="echarbox">
          <registrationdata :qyvalue="value"></registrationdata>
          <numberparticipants :qyvalue="value" @centershow="centershow"></numberparticipants>
          <institutional :qyvalue="value" @centershow="centershow"></institutional>
        </div>
      </div>
      <!-- 中间容器 -->
      <div class="center">
        <edetails v-if="show" @gbcenter="gbcenter" :qyvalue="value" :shownum="shownum"></edetails>
      </div>
      <!-- 右侧容器 -->
      <div class="betweenrg">
        <div class="echarbox">
          <settlein :qyvalue="value" @centershow="centershow"></settlein>
          <classhour :qyvalue="value"></classhour>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import registrationdata from '@/components/index-echarts/registrationdata.vue'
  import numberparticipants from '@/components/index-echarts/numberparticipants.vue'
  import institutional from '@/components/index-echarts/institutional.vue'
  import settlein from '@/components/index-echarts/settlein.vue'
  import classhour from '@/components/index-echarts/classhour.vue'
  import edetails from '@/components/edetails/edetails.vue'
  import { region } from '@/api/user.js'
  export default {
    name: 'index',
    components: {
      registrationdata,
      numberparticipants,
      institutional,
      settlein,
      classhour,
      edetails
    },
    props: [],
    data() {
      return {
        arr: [],
        options: [],
        value: '',
        title: '',
        show: false,
        shownum: '',
        showtime: ''
      }
    },
    computed: {},
    watch: {},
    created() {
      // role 1
      var url = window.location.href;
      var queryString = url.split('?')[1];
      queryString = queryString.split('&');
      for(var item of queryString) {
        item = item.split('=');
        this.arr.push(item[1])
      }
      //  区域
      this.onload()
    },
    mounted() {
      const that = this
        window.onresize = () => {
          return (() => {
            if (document.body.clientWidth < 1366) {
              this.$refs.allstu.style.left = "660px"
            } else {
              this.$refs.allstu.style.left = "50%"
            }
          })()
      }
    },
    methods: {
      centershow(e) {
        this.shownum = e
        this.show = true
      },
      gbcenter() {
        this.show = false
        this.showtime = new Date().getTime()
      },
      onload() {
        var that = this
        if (this.arr.length>0&&this.arr[0]!=1) {
          that.value = this.arr[1]
          that.title = decodeURI(this.arr[2])
          return
        }
        region().then(res => {
          that.options = res.data
          that.value = res.data[1].id
          that.title = res.data[1].name
        })
      },
      select() {
        var e = this.value
        for (let i = 0; i < this.options.length; i++) {
          if (this.options[i].id == e) {
            this.title = this.options[i].name
          }
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .fiexbag{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 1080px;
    // background-image: url('https://admin.hcjypt.com/static/6b5ca4c7.gif');
    // background-position: center top;
    // background-repeat: no-repeat;
    margin:0px;
    background: url('https://admin.hcjypt.com/static/6b5ca4c7.gif') no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
    z-index: -1;
  }
  .index {
    min-height: 1080px;
    width: 100%;
    min-width: 1768Px;
    overflow: hidden;
    box-sizing: border-box;
    background-image: url('../assets/images/bag1.png');
    // background-image: url('../assets/images/kj.gif');
    background-position: center top;
    background-repeat: no-repeat;
    // 顶部文字
    .top {
      font-weight: bold;
      font-size: 34Px;
      text-align: center;
      line-height: 95Px;
      background-image: -webkit-linear-gradient(bottom, #f1f5f7, #ade4ff, #5cc9ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    // 中间容器
    .flexbox{
      height: calc(100% - 125Px);
      width: 100%;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      padding: 0 0 0px 30px;
      box-sizing: border-box;
      .betweenlf, .betweenrg{
        height: 100%;
        width: 460Px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
      .betweenlf {
        .echarbox{
          width: 100%;
          background-color: rgba(0, 0, 0, 0.2);
          padding-right: 10px;
        }
      }
      .center{
        width: 845Px;
        height: 616Px;
        margin-top: 100Px;
      }
      .betweenrg{
        margin-right: 30px;
        .echarbox{
          height: 48%;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.2);
          padding-left: 40px;
        }
      }
    }
  }
  .allstu{
    position: absolute;
    top: 13Px;
    left: 50%;
    transform: translate(-50%,0);
    width: 600Px;
    height: 30Px;
    margin-top: 15Px;
    background-image: url('../assets/images/onetop1.png');
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }
</style>
